<template>
	<div class="statistics">
		<!-- 员工数据总览 -->
		<div class="pandect">
			<div class="pandect_top">
				<div class="l">数据总览</div>
				<div class="r">
					<ul>
						<li :class="{act: act === item.type}" v-for="(item,index) in staffPandect" :key="index"
							@click="handleTab(item.type)">
							{{ item.name }}
						</li>
					</ul>
				</div>
			</div>
			<div class="upTo">以下数据截止至{{ screenData.time * 1000 | formatTime }}</div>
			<div class="grandTotal" v-if="Object.keys(screenData).length > 0">
				<ul>
					<li @click="handleCustomer()">
						<p class="pOrange">
							今日获客(人)
						</p>
						<p class="pNum pOrange">
							{{screenData.count_source.value}}
						</p>
						<p>
							<label v-if="screenData.count_source.trend == 0">持平</label>
							<label v-if="screenData.count_source.trend != 0">日新增<span
								:class="[ screenData.count_source.trend > 0 ? 'pOrange' : 'pGreen', 'pSpan' ]">{{ screenData.count_source.trend }}</span></label>
							<img class="down_icon_img" v-if="screenData.count_source.trend < 0"
								 :src="`${constant.imgUrl}getguest/down_icon.png`"/>
							<img class="down_icon_img" v-if="screenData.count_source.trend > 0"
								 :src="`${constant.imgUrl}getguest/up_icon.png`"/>
						</p>
					</li>
					<li>
						<p>累计访问量(人）</p>
						<p class="pNum">
							{{screenData.count_visit.value}}
						</p>
						<p>
							<label v-if="screenData.count_visit.trend == 0">持平</label>
							<label v-if="screenData.count_visit.trend !== 0">日新增<span
								:class="[ screenData.count_visit.trend > 0 ? 'pOrange' : 'pGreen', 'pSpan' ]">{{ screenData.count_visit.trend }}</span></label>
							<img class="down_icon_img" v-if="screenData.count_visit.trend < 0"
								 :src="`${constant.imgUrl}getguest/down_icon.png`"/>
							<img class="down_icon_img" v-if="screenData.count_visit.trend > 0"
								 :src="`${constant.imgUrl}getguest/up_icon.png`"/>
						</p>
					</li>
					<li>
						<p>累计转发(次）</p>
						<p class="pNum">
							{{screenData.count_forward.value}}
						</p>
						<p>
							<label v-if="screenData.count_forward.trend == 0">持平</label>
							<label v-if="screenData.count_forward.trend !== 0">日新增<span
								:class="[ screenData.count_forward.trend > 0 ? 'pOrange' : 'pGreen', 'pSpan' ]">{{ screenData.count_forward.trend }}</span></label>
							<img class="down_icon_img" v-if="screenData.count_forward.trend < 0"
								 :src="`${constant.imgUrl}getguest/down_icon.png`"/>
							<img class="down_icon_img" v-if="screenData.count_forward.trend > 0"
								 :src="`${constant.imgUrl}getguest/up_icon.png`"/>
						</p>
					</li>
				</ul>
			</div>
			<div class="grandTotalCanvas" v-if="Object.keys(screenData).length > 0">
				<div class="transmit">
					<b>{{ screenData.forward_rate | conversion }}%</b>
					<p>分享转化率</p>
				</div>
				<div class="place">
					<b>{{ screenData.perbook_rate | conversion }}%</b>
					<p>下单转化率</p>
				</div>
				<div class="gain">
					<b>{{ screenData.customer_rate | conversion }}%</b>
					<p>获客转化率</p>
				</div>
			</div>
		</div>
		<!-- 员工数据概览 -->
		<div class="pandect">
			<div class="pandect_top">
				<div class="l">数据概览</div>
				<div class="r">
					<ul>
						<li :class="{act: overviewAct === item.type}" v-for="(item,index) in overviewTab" :key="index"
							@click="handleOvervie(item.type)">
							{{ item.name }}
						</li>
					</ul>
				</div>
			</div>
			<div class="overview">
				<!-- uchart -->
				<div class="qiun-charts">
					<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
				</div>
			</div>
		</div>
		<!-- 员工排行 -->
		<div class="pandect">
			<div class="pandect_top">
				<div class="l">团队数据</div>
				<div class="rT">
					<ul>
						<li v-for="(item, index) in rankW" :key="index" :class="{ act:arnkWtab === item.type }"
							@click="handleRank(item.type)">
							{{ item.name }}
						</li>
					</ul>
				</div>
			</div>
			<div class="month">
				<ul>
					<li v-for="(item, index) in rankT" :key="index" :class="{ act: arnkTtab === item.type }"
						@click="handleEmployee(item.type)">
						{{ item.name }}
					</li>
				</ul>
			</div>
			<div class="table">
				<t-table>
					<t-tr>
						<t-th v-for="(item,index) in thData" :key="index">{{item.name}}</t-th>
					</t-tr>
					<t-tr  v-for="(item, index) in tabList" :key="index">
						<t-td>
							<span v-if="item.rank === 1" class="iconSpan"><img
								:src="`${constant.imgUrl}statistics/phFirst.jpg`" alt=""></span>
							<span v-else-if="item.rank === 2" class="iconSpan"><img
								:src="`${constant.imgUrl}statistics/phSecond.jpg`" alt=""></span>
							<span v-else-if="item.rank === 3" class="iconSpan"><img
								:src="`${constant.imgUrl}statistics/phThirdly.jpg`" alt=""></span>
							<span v-else class="circle">{{ item.rank }}</span>
						</t-td>
						<t-td class="tdYg">
							<div class="imgbox">
								<img :src="item.image_url" alt=""/>
							</div>
							<div class="msgBox">
								<p class="p1 text-overflow">{{ item.username }}</p>
								<p class="p2">{{ item.role_name }}</p>
							</div>
						</t-td>
						<t-td>{{ item.num }}</t-td>
					</t-tr>
				</t-table>
				<div class="examine" @click="handleQuit()" v-if="tabList.length > 0 && tabList.length > 5">
					<span>查看更多</span> >
				</div>
				<div class="examineNo" v-else-if="tabList.length <= 0">
					<div class="nodata"></div>
					<p>暂无数据！</p>
				</div>
			</div>
		</div>
		<!-- 预约单来源 -->
		<div class="pandect nobottom">
			<div class="pandect_top">
				<div class="l">预约单来源</div>
				<div class="r">
					<ul>
						<li :class="{act: prebookTabAct === item.type}" v-for="(item, index) in prebookTab" :key="index"
							@click="handlePrebook(item.type)">
							{{ item.name }}
						</li>
					</ul>
				</div>
			</div>
			<div class="total">
				总计  {{prebookWd.total}}
			</div>
		</div>
		<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		<div class="pandect">
			<div class="make">
				<div class="makeList">
					<ul>
						<li>
							线上报名
							<span class="strong_text">{{prebookWd.online_sign_up|conversion}}</span>%
						</li>
						<li class="liz">
							免费设计
							<span class="strong_text">{{prebookWd.intelligence_price|conversion}}</span>%
						</li>
						<li class="lih">
							户型设计
							<span class="strong_text">{{prebookWd.apartment_design|conversion}}</span>%
						</li>
						<li class="lhzx">
							装修礼包
							<span class="strong_text">{{prebookWd.renovation_coupon|conversion}}</span>%
						</li>
						<li class="lif">
							家居风水
							<span class="strong_text">{{prebookWd.fengshui|conversion}}</span>%
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import { $formatDate as FormatTime } from '@/utils/util'
import tTable from '@/components/t-table/t-table.vue'
import tTh from '@/components/t-table/t-th.vue'
import tTr from '@/components/t-table/t-tr.vue'
import tTd from '@/components/t-table/t-td.vue'
// api
import { getBossData, prebookData, overviewData, employeeData } from '@/api/getGuest'

// js
import Ucharts from '@/components/u-charts/u-charts.js'
var _self
var canvaArea = null
var canvasRing = null
export default {
	name: 'Statistics',
	components: {
		tTable,
		tTh,
		tTr,
		tTd
	},
	data() {
		return {
			constant: this.$constant,
			staffPandect: [ // 员工数据总览
				{ name: '今日', type: 1 },
				{ name: '昨天', type: 2 },
				{ name: '近7天', type: 3 },
				{ name: '累计', type: 4 }
			],
			prebookTab: [ // 预约单来源
				{ name: '7天', type: 1 },
				{ name: '15天', type: 2 },
				{ name: '1个月', type: 3 },
				{ name: '全部', type: 4 }
			],
			overviewTab: [ // 员工数据概览
				{ name: '近7天', type: 1 },
				{ name: '近15天', type: 2 }
			],
			rankW: [ // 员工排行tab1
				{ name: '获客', type: 'customer' },
				{ name: '转发', type: 'forward' },
				{ name: '访客', type: 'visit' }
			],
			rankT: [ // 员工排行tab2
				{ name: '7天', type: 1 },
				{ name: '15天', type: 2 },
				{ name: '1个月', type: 3 },
				{ name: '全部', type: 4 }
			],
			arnkWtab: 'customer', // 员工排行act
			arnkTtab: 1, // 员工排行act
			act: 1, // 员工数据总览tab
			prebookTabAct: 1, // 预约单来源tab
			overviewAct: 1, // 员工数据概览tab
			screenData: [], // 员工总览数据
			prebookWd: [], // 预约单来源数据
			width: '98%',
			tabList: [], // 员工排行数据
			thData: [
			    { name: '排名' },
			    { name: '团队' },
			    { name: '获客数' }
			],
			page: 1 // 员工排行页码
		}
	},
	filters: {
		conversion(n) {
			return n ? n.toFixed(2) : n
		}
	},
	onLoad(queryData) {
	    this.queryData = queryData
		this.init()
	},
	methods: {
	    init() {
			_self = this
			this.handleTab()
			this.handlePrebook()
			this.handleOvervie()
			this.handleRank()
		},
		// ==员工数据总览==
		handleTab(type) {
			const params = {}
			if (type) {
				params.type = type
				this.act = type
			} else {
				params.type = 1
				this.act = 1
			}
			getBossData(params).then(res => {
				if (res.status === 'success') {
					this.screenData = res.data
					this.screenData.time = res.time
				} else {
					this.$toast(res.message)
				}
			})
		},
		// ==预约单来源==
		handlePrebook(type) {
			const params = {}
			if (type) {
				params.type = type
				this.prebookTabAct = type
			} else {
				params.type = 1
				this.prebookTabAct = 1
			}
			prebookData(params).then(res => {
				if (res.status === 'success') {
					this.prebookWd = res.data
					const data = res.data
					let chartData = {
						'series': [{
							'name': '线上报名',
							'data': data.online_sign_up,
							'color': '#ff6900'
						}, {
							'name': '免费设计',
							'data': data.intelligence_price,
							'color': '#f8546b'
						}, {
							'name': '户型设计',
							'data': data.apartment_design,
							'color': '#3994fa'
						}, {
							'name': '装修礼包',
							'data': data.renovation_coupon,
							'color': '#a444ab'
						}, {
							'name': '家居风水',
							'data': data.fengshui,
							'color': '#ffc047'
						}]
					}
					console.log(chartData)
					this.showPie('canvasRing', chartData)
				}
			})
		},
		showPie(canvasId, chartData) {
			canvasRing = new Ucharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: { show: false },
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: true,
				width: uni.upx2px(750),
				height: uni.upx2px(500),
				dataLabel: true,
				extra: {
					pie: {
						lableWidth: 15
					}
				}
			})
		},
		touchRing(e) {
			canvasRing.showToolTip(e, {
				format: function(item) {
					return item.name + ':' + item.data
				}
			})
		},
		// ==员工数据概览==
		// 员工数据
		handleOvervie(type) {
			const params = {}
			if (type) {
				params.type = type
				this.overviewAct = type
			} else {
				params.type = 1
				this.overviewAct = 1
			}
			overviewData(params).then(res => {
				if (res.status === 'success') {
					let data = res.data
					let chartData = {
						categories: [...data.date],
						series: [
							{
								name: '分享数',
								data: [...data.forward_num],
								color: '#F8546B'
							},
							{
								name: '访客数',
								data: [...data.visit_num],
								color: '#3994FA'
							},
							{
								name: '获客数',
								data: [...data.customer_num],
								color: '#FF6900'
							}
						]
					}
					this.initChart('canvasArea', chartData)
				}
			})
		},
		initChart(canvasId, chartData) {
			let that = this
			let yAxisMax = 10
			for (let i = 0; i < chartData.series.length; i++) {
				let nowData = chartData.series[i]
				let max = Math.max.apply(null, nowData)
				yAxisMax = max > yAxisMax ? max : yAxisMax
			}
			canvaArea = new Ucharts({
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				background: '#FFFFFF',
				width: uni.upx2px(750),
				height: uni.upx2px(500),
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disableGrid: true,
					labelCount: 7// 标签数量
				},
				yAxis: {
					disableGrid: true,
					min: 0,
					max: yAxisMax // 终止值
				},
				extra: {
					area: {
						type: 'straight',
						opacity: 0.2,
						addLine: true,
						width: 2
					}
				}
			})
		},
		touchArea(e) {
			canvaArea.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data
				}
			})
		},

		handleRank(type) {
			this.arnkWtab = type
			const params = {}
			if (type) {
				params.resource_type = String(type)
				this.arnkWtab = type
			} else {
				params.resource_type = 'customer'
				this.arnkWtab = 'customer'
			}
			params.type = this.arnkTtab
			params.limit = 5
			params.page = this.page
			employeeData(params).then(res => {
				if (res.status === 'success') {
					if (this.tabList.length >= 5) {
						this.tabList = [...this.tabList, ...res.data.list]
					} else {
						this.tabList = res.data.list
					}
					this.sessionTabList = res.data.list
				} else {
					this.$toast(res.message)
				}
			})
			console.log(type)

			switch (type) {
				case 'customer':
				    this.thData[2].name = '获客数'
					break
				case 'forward':
					this.thData[2].name = '分享数'
					break
				case 'visit':
					this.thData[2].name = '访客数'
					break
			}
		},
		handleEmployee(type) { // 天数tab
			this.page = 1
			this.arnkTtab = type
			this.handleRank(this.arnkWtab)
		},
		handleQuit() {
			const sessionTabList = this.sessionTabList.length
			if (sessionTabList < 5) {
				this.$toast('已加载全部数据！')
				return
			}
			this.page = this.page + 1
			this.handleRank()
		},
		handleCustomer() {
			let query = {
				owner_user_id: this.queryData.owner_user_id
			}
			uni.navigateTo({
				url: `/pages/order/subscribeOrder${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style lang="scss" scope>
	.statistics {
		background-color: #f5f5f5;
		.pandect {
			background-color: #fff;
			overflow: hidden;
			padding: 20px 30px;
			margin-bottom: 20px;
			&.nobottom{
				margin-bottom: 0px;
			}

			.pandect_top {
				overflow: hidden;

				.l {
					float: left;
					color: $fontColorMain;
					font-size: 30px;
					font-weight: 600;
					margin-top: 15px
				}

				.r {
					float: right;
					

					ul {
						overflow: hidden;
						border: solid 1px #ddd;
						border-radius: 24px;

						li {
							float: left;
							width: 98px;
							line-height: 50px;
							text-align: center;
							border-right: solid 1px #ddd;
							font-size: 24px;

							&:last-child {
								border-right: none;
							}
						}

						.act {
							background-color: $mainColor;
							color: #3A1B04;
						}
					}
				}

				.rT {
					float: right;

					ul {
						overflow: hidden;

						li {
							float: left;
							width: 98px;
							line-height: 50px;
							text-align: center;
							font-size: 24px;
							color: $fontColor3;
							padding-bottom: 15px;

							&:last-child {
								border-right: none;
							}
						}

						.act {
							color: $fontColorMain;
							position: relative;

							&::before {
								content: "";
								display: block;
								position: absolute;
								bottom: 0;
								left: calc(50% - 25px);;
								width: 50px;
								height: 6px;
								background: $mainColor;
								border-radius: 3px;
							}
						}
					}
				}
			}

			.make {
				width: 100%;
				position: relative;
				padding-top: 20px;
				.makeList {
					margin-top: 20px;
					.strong_text{
						font-weight: bold;
						margin: 0 5px 0 20px;
					}
					ul {
						li {
							padding: 8px 0;
							/*text-align: center;*/
							width: 50%;
							float: left;
							box-sizing: border-box;
							font-size: 24px;
							color: $fontColor2;
							position: relative;
							text-indent: 40px;

							&::before {
								content: "";
								display: block;
								position: absolute;
								top: 36%;
								/*left: 10%;*/
								width: 12px;
								height: 12px;
								background: $auxiliaryColor2;
								border-radius: 50%;
							}
						}

						.liz {
							&::before {
								background-color: #F8546B;
							}
						}

						.lih {
							&::before {
								background-color: #3994FA;
							}
						}

						.lhzx {
							&::before {
								background-color: #A444AB;
							}
						}

						.lif {
							&::before {
								background-color: #FFC047;
							}
						}
					}
				}
			}

			.total {
				font-size: 28px;
				color: $fontColor3;
				text-align: center;
				padding-top: 40px;
				padding-bottom: 10px;

				b {
					color: $fontColorMain;
					padding: 0 4px;
				}
			}

			.month {
				padding-top: 20px;

				ul {
					overflow: hidden;
					border: solid 1px #ddd;
					border-radius: 24px;

					li {
						float: left;
						width: 25%;
						line-height: 50px;
						text-align: center;
						border-right: solid 1px #ddd;
						font-size:24px;
						box-sizing: border-box;

						&:last-child {
							border-right: none;
						}
					}

					.act {
						background-color: $mainColor;
						color: #3A1B04;
					}
				}
			}

			.t-table {
				padding-top: 20px;
				width: 100%;
					.t-tr {

						&+.t-tr{
							line-height: 40px;
							padding: 10px 0;
						}
						.t-th {
							background-color: $backColorMain;
							color: $fontColor3;
							font-size: 24px;
						}

						.t-ttd {
							text-align: center;
							height: 120px;
							border-bottom: solid 1px #ddd;

							p {
								font-size: 28px;
								color: $fontColorMain;
							}

							span {
								font-size: 28px;
								color: $fontColor3;
							}
						}

						.tdYg {
							/*width: 400px;*/
							/*text-align: left;*/
							/*position: relative;*/
							/*flex-direction: column;*/
							display: flex;
							align-items: center;
							justify-content: left;
							.imgbox {
								width: 60px;
								height: 60px;
								display: inline-block;
								// margin-right:20px;
								// margin-left:50px;
								img {
									width: 100%;
									height: 100%;
									border-radius: 50%;
									border: 0.5px solid #f1f1f1;
									// margin-right: 10px;
								}
							}

							.msgBox{
								text-align: left;
								margin-left: 10px;
								.p1{
									width: 100px;
									margin-bottom:10px;
								}
								.p2{
									color: #999;

								}
							}
						}

						.circle {
							width: 34px;
							height: 34px;
							background-color: $fontColor5;
							border-radius: 50%;
							display: block;
							margin: 0 auto;
							color: #fff;
						}

						.iconSpan {
							display: block;
							padding-top: 3px;
						}

						span {
							img {
								width: 40px;
								height: 46px;
								// margin-right: -50px;
							}
						}
					}
			}
			.examineNo {
				font-size: 26px;
				color: $fontColor3;
				text-align: center;
				padding: 20px 0;

				p {
					padding-top: 20px;
				}

				.nodata {
					margin: 0 auto;
					width: 80%;
					height: 250px;
					background: url($imgUrl + 'statistics/noData.png') no-repeat center center;
					background-size: 100%;
				}
			}

			.examine {
				font-size: 26px;
				color: $fontColor3;
				text-align: center;
				padding: 20px 0;
				display: flex;
				justify-content: center;
				align-items: center;

				i {
					padding-top: 2px;
					display: block;
					float: left;
				}
			}

			.upTo {
				color: $fontColor3;
				font-size: 24px;
				padding-top: 28px;
				padding-bottom: 20px;
				border-bottom: solid 1px $backColorMain;
			}

			.grandTotal {
				padding-top: 30px;
				padding-bottom: 50px;

				ul {
					display: flex;
					justify-content: space-between;
					align-items: center;

					li {
						font-size: 24px;
						text-align: center;

						img {
							width: 16px;
						}

						.down_icon_img {
							height: 20px;
							margin-left: 4px;
						}

						.pNum {
							padding: 18px 0;
							font-size: 36px;
							font-weight: 600;
						}

						.pOrange {
							color: #FF6900;
							position: relative;

							i {
								position: absolute;
								top: 7px;
								right: -24px;
							}
						}

						.pGreen {
							color: #01AC2C;
						}

						.pSpan {
							padding-left: 8px;
						}
					}
				}
			}

			.grandTotalCanvas {
				padding-top: 50px;
				height: 280px;
				@include bis($imgUrl + 'statistics/fanke.png');
				position: relative;

				.transmit, .place, .gain {
					text-align: center;
					position: absolute;
					left: 52%;
					top: 25%;

					b {
						font-size: 28px;
						color: $fontColorMain;
					}

					p {
						font-size: 18px;
						color: $fontColor3;
					}
				}

				.place {
					right: -25%;
					top: 43%;
				}

				.gain {
					left: 42%;
					top: 60%;
				}
			}

			.overview {
				text-align: center;
				position: relative;
				padding-top: 60px;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>

<style lang="scss" scoped>

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

</style>
